<template>
  <div class="city">
    <cityHeader></cityHeader>
    <citySearch :city='city'></citySearch>
    <cityList :city='city' :hotCity="hotCity" :letter="letter" ></cityList>
    <cityAlpahbet :city="city" @change="handleLetter"></cityAlpahbet>
  </div>
</template>

<script>
import axios from 'axios'
import cityHeader from './components/header.vue'
import citySearch from './components/search.vue'
import cityList from './components/list.vue'
import cityAlpahbet from './components/alpahbet.vue'
export default {
  name: 'CityPage',
  components: { cityHeader, citySearch, cityList, cityAlpahbet },
  data () {
    return {
      hotCity: [],
      city: {},
      letter: ''
    }
  },
  methods: {
    getCityInfo () {
      axios.get('/mock/city.json').then(response => {
        const data = response.data.data
        console.log(data)
        this.hotCity = data.hotCities
        this.city = data.cities
      })
    },
    handleLetter (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCityInfo()
  }

}
</script>

<style lang="scss">
</style>
